import React, { useState, useEffect, useRef } from 'react'
import { Button, Row, Col, Input, Checkbox, Pagination, Modal, Form, Select, Upload } from 'antd';
import { FormOutlined, DeleteOutlined, UploadOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { Carousel } from 'antd';
import http from '../http/http.js'
import './HomeManage.scss';


const { Search } = Input;
const { Option } = Select;
const { confirm } = Modal;

// 引入轮播图的样式
const contentStyle = {
  height: '160px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};

// 上传图片数据
const fileList = [
  {
    uid: '-1',
    name: 'xxx.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
]

// 显示列表条数
const pageData = {
  page: 1,
  pageSize: 100,
  total: 10
}


export default function HomeManage() {
  const [isAddVisible, setIsAddVisible] = useState(false)
  const [isEditVisible, setIsEditVisible] = useState(false)


  // 民宿列表数据
  const [homeList, setHomeList] = useState([])

  // 获取新增民宿列表数据
  const addForm = useRef(null)


  // 获取民宿列表数据
  const getHomeList = () => {
    http({
      method: "post",
      url: "/homeManagement/list",
      data: pageData
    })
      .then((res) => {
        console.log(res.data.data);
        setHomeList(res.data.data)
        console.log(homeList);
      })
  }

  // 新增民宿的方法
  const addHome = () => {
    addForm.current.validateFields().then(value => {
      // console.log(value);
      setIsAddVisible(false)

      http({
        method: "post",
        url: "/homeManagement/add",
        data: { ...value }
      })
        .then(res => {
          setHomeList([...homeList, res.data])
          console.log(homeList);
        })
    }).catch(err => {
      console.log(err);
    })
  }

  useEffect(() => {
    getHomeList()
  }, [])// eslint-disable-line react-hooks/exhaustive-deps


  // 删除弹出框提示
  const deleteMethod = (item) => {
    console.log(item);
    confirm({
      title: '确定删除?',
      icon: <ExclamationCircleOutlined />,
      onOk() {
        http({
          method: "get",
          url: `/homeManagement/delete/${item.id}`,
          data: addForm
        })
          .then((res) => {
            getHomeList()
          })

      },
      onCancel() {
        console.log('取消');
      },
    });
  }

  return (
    <div>
      {/* 头部搜索区域 */}
      <div>
        <Row>
          <Col span={16}>
            <Button type="primary" size={'medium'} >卡片
            </Button>
            <Button type="primary" size={'medium'} >列表
            </Button>
          </Col>
          <Col span={2}>
            <Button
              type="primary"
              onClick={() => {
                setIsAddVisible(true);
              }}
            >
              新增民宿
            </Button>
          </Col>
          <Col span={4}>
            <Search placeholder="民宿名称" enterButton />
          </Col>
        </Row>
      </div>

      {/* 民宿卡片区域 */}
      <div className="container">
        {(homeList).map(item => (
          <div className="card" key={item.id}>
            <Row gutter={16}>
              <Col className="homecard">
                <div className="card-title">
                  <p>{item.name}</p>
                </div>
                <div>
                  <Carousel autoplay>
                    <div>
                      <h3 style={contentStyle}>1</h3>
                    </div>
                    <div>
                      <h3 style={contentStyle}>2</h3>
                    </div>
                    <div>
                      <h3 style={contentStyle}>3</h3>
                    </div>
                  </Carousel>
                </div>
                <div id="rent_table">
                  <table>
                    <tbody>
                      <tr>
                        <td>地方区域：</td>
                        <td>{item.code}</td>
                      </tr>
                      <tr>
                        <td>租金：</td>
                        <td>{item.rent}</td>
                      </tr>
                      <tr>
                        <td>押金：</td>
                        <td>{item.deposit}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <div>
                  <Checkbox></Checkbox>
                  <div className="btn">
                    <Button type="primary" icon={<FormOutlined />} onClick={() => setIsEditVisible(true)}></Button>
                    <Button type="danger" icon={<DeleteOutlined />} onClick={() => deleteMethod(item)}></Button>
                  </div>
                </div>
              </Col>
            </Row>
          </div>
        ))}
      </div>



      {/* 分页区域 */}
      < Row >
        <Col span={18} offset={5}>
          <Pagination
            total={pageData.total}
            showSizeChanger
            showQuickJumper
            showTotal={total => `Total ${total} items`}
            pageSize={pageData.pageSize}
          />
        </Col>
      </Row>


      {/* 新增民宿表单区域 */}
      <Modal
        visible={isAddVisible}
        title="新增民宿"
        okText="创建"
        cancelText="取消"
        onCancel={() => {
          setIsAddVisible(false)
        }}
        onOk={() => {
          addHome()
        }}
      >
        <Form
          ref={addForm}
          layout="vertical"
        >
          <Form.Item
            label="名称"
            rules={[{ required: true, message: '请输入名称!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="地方区域"
          >
            <Select defaultValue="lucy" style={{ width: 150 }} >
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
            </Select>
            <Select defaultValue="lucy" style={{ width: 150 }} >
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
            </Select>
            <Select defaultValue="lucy" style={{ width: 150 }} >
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="押金"
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="租金"
          >
            <Input />
          </Form.Item>
          <Form.Item label="补充说明">
            <Input type="textarea" />
          </Form.Item>
          <Form.Item
            label="图片"
          >
            <Upload
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              listType="picture"
              defaultFileList={[...fileList]}
              className="upload-list-inline"
            >
              <Button icon={<UploadOutlined />}>上传</Button>
            </Upload>
          </Form.Item>
        </Form>
      </Modal>

      {/* 修改民宿表单区域 */}
      <Modal
        visible={isEditVisible}
        title="修改民宿"
        okText="修改"
        cancelText="取消"
        onCancel={() => {
          setIsEditVisible(false)
        }}
        onOk={() => {
          console.log(111);
        }}
      >
        <Form
          layout="vertical"
        >
          <Form.Item
            label="名称"
            rules={[{ required: true, message: '请输入名称!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="地方区域"
          >
            <Select defaultValue="lucy" style={{ width: 150 }} >
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
            </Select>
            <Select defaultValue="lucy" style={{ width: 150 }} >
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
            </Select>
            <Select defaultValue="lucy" style={{ width: 150 }} >
              <Option value="jack">Jack</Option>
              <Option value="lucy">Lucy</Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="押金"
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="租金"
          >
            <Input />
          </Form.Item>
          <Form.Item name="hexplain" label="补充说明">
            <Input type="textarea" />
          </Form.Item>
          <Form.Item
            label="图片"
          >
            <Upload
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              listType="picture"
              defaultFileList={[...fileList]}
              className="upload-list-inline"
            >
              <Button icon={<UploadOutlined />}>上传</Button>
            </Upload>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );

}
